Vue.component("top",{
    template: `
    <el-header class="title">
        <div class="c900 flex">
                    <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>
                    <nav>
                        <el-link href="index.html" class="center" :underline="false" style="background-color: #99f7">首页</el-link>
                        <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>
                        <el-link class="center" :underline="false">电影院</el-link>
                        <el-link class="center" :underline="false">优惠活动</el-link>
                    </nav>
                    
                    <slot name="search">
                    <el-input style="width: auto" id="name" placeholder="请输入电影,影院,活动" v-model="search">
                        <el-button slot="append" icon="el-icon-search" @click="look"></el-button>
                    </el-input>
                    </slot>
                    
                    <div class="flex">
                        <sign ref="a" style="display: flex; gap: 10px">
                            <template #nologin>
                                <el-link href="register.html">注册</el-link>
                                <el-button type="text" @click.prevent="forget">忘记密码</el-button>
                                <el-popover
                                    placement="top-start"
                                    title="打开手机端页面"
                                    width="200"
                                    trigger="hover">
                                    <p><img src="/qrcode/mobile" alt=""></p>
                                    <p>
                                        <h3>扫码登录</h3>
                                        <img id="clq" src="/qrcode/createLoginQrcode" @load="loadFn">
                                        <button onclick="clq.src = '/qrcode/createLoginQrcode?'+new Date().getTime()">重新获取二维码</button>
                                    </p>
</p>
                                        
                                    
                                    
                                    
                                     <el-link slot="reference" href="login.html">登录</el-link>
                                  </el-popover>
                               
                            </template>
                            <template #logined="props">
                                <!--                            <el-avatar :src="$refs.a.myinfo.head"></el-avatar>-->
                                <el-avatar :src="props.myinfo.head"></el-avatar>
                                <el-link href="/sign/logout">退出</el-link>
                            </template>
                        </sign>
                    </div>
                </div>
            </el-header>
    `,
    data(){
        return{
            search: '',
            ws: null
        }
    },
    methods:{
        look(){
            if(window.location.href.substring(window.location.href.lastIndexOf('/') + 1) != "index.html"){
                location.href = "index.html?name=" + this.search;
            }
        },
        loadFn(){
            axios.get("/qrcode/getLoginToken").then(res=>{
                if(res.data.code == 1){
                    this.ws = new WebSocket("ws://127.0.0.1/autoLogin/" + res.data.data);
                    this.ws.onmessage = (e)=>{
                        if (e.data == 'OK') {
                            axios.get("/qrcode/autoLogin?token=" + res.data.data).then(res=>{
                                if(res.data.code == 1){
                                    this.$refs.a.myinfo = res.data.data;
                                }
                            });
                        }
                    }
                }
            })

        }
    }
});